<template>
	<div class="read_tape">
		<div class="read_nav">
			<div class="back_btn" @click="back()"></div>
			<p>自创亲子阅读</p>
		</div>
		<div class="tips">
			<div>
				小朋友，和爸爸妈妈们一起制作独一无二的创意对话吧，一起录制才有效哦
			</div>
		</div>
		<div class="bom_alert">
			<div class="running" v-show="show_running">
				<div class="run_errer" @click="errerId()"></div>
				<div class="run_true" @click="tally()"></div>
				<p>正在录音<span>{{minute}}'{{second}}''</span></p>
			</div>
			<div class="ready" v-show="show_ready">
				<div id="ready_icon" :class="ready_icon"></div>
				<p>准备录音</p>
			</div>
			<div class="begin" v-show="show_start">
				<div class="tape_icon" @click="show_one()"></div>
				<p>开始录音</p>
			</div>
			<!--<em></em>
			<p>和爸妈一起录音吧</p>-->
		</div>
	</div>
</template>
<script type="text/ecmascript-6">
	export default {
		data() {

			return {
				show_start: true,
				show_ready: false,
				show_running: false,
				minute: 0,
				second: 0,
				con: false,
				ready_icon: 'ready_icon3'
			}
		},
		created() {
			this.$store.commit('hidefooter');
			let that = this;
			window.reciveUpload = function(result) {
				that.recive(result);
			}
		},
		methods: {
			back() {
				this.$router.go(-1);
			},
			tally() {
				this.con = true;
				this.endRec();
				this.myLayer = layer.open({
					title: '正在上传，请稍后。。。',
					type: 2,
					shadeClose: false
				});
				setTimeout(() => {
					//模拟录音上传成功后操作
					//this.reciveUpload('123456.mp3');
				}, 2000);
			},
			show_one() {
				this.con = false;
				this.show_start = false;
				this.show_ready = true;
				this.show_running = false;
				var self = this;
				var ready = this.show_ready;
				var running = this.show_running;
				var num = 2;
				let t_show1;
				let t_show = setInterval(() => {
					self.ready_icon = 'ready_icon' + num;
					num--;
					if(num == -1) {
						clearInterval(t_show);
						this.startRec();
						this.show_ready = false;
						this.show_running = true;
						if(this.show_running == true) {
							t_show1 = setInterval(() => {
								if(self.con == false) {
									if(self.second < 59) {
										self.second++;
									} else {
										self.minute++;
										self.second = 0;
									}
								} else {
									clearInterval(t_show1)
								}
							}, 1000)
						}
					}
				}, 1000);
			},
			//开始录音
			startRec() {
				try {
					appobject.Interactive("ys_startrecord");
				} catch(e) {
					return;
				}
			},
			//暂停录音
			pauseRec() {
				try {
					appobject.Interactive("ys_pauserecord");
				} catch(e) {
					return;
				}
			},
			//结束录音
			endRec() {
				try {
					appobject.Interactive("ys_stoprecord");
				} catch(e) {
					return;
				}
			},
			errerId() {
				layer.confirm('确定取消录音吗?', () => {
					layer.closeAll();
					this.show_start = true;
					this.show_ready = false;
					this.show_running = false;
					this.con = true;
					this.minute = 0;
					this.second = 0;
					this.ready_icon = "ready_icon3";
				}, () => {
					return;
				});
			},
			//接收录音文件并上传
			recive(result) {
				var v_url = result;
				layer.close(this.myLayer);
				if(v_url == 'error') {
					layer.tips('录音上传失败!');
					this.show_running = false;
					this.show_start = true;
					this.minute = 0;
					this.second = 0;
					this.con = true;
					this.ready_icon = 'ready_icon3';
				} else {
						localStorage.setItem('readTitle',0);
						let timeStamp=new Date().Format('yyyyMMddhhmmss').toString();
						let chcode=timeStamp;
						let txtename=timeStamp+'自定义录制';
						setTimeout(() => {
							this.$router.push({
								path: '/readnext',
								query: {
									title: txtename,
									chid: chcode,
									url: v_url
								}
							});
						}, 1000);
				}
			}

		}
	}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
	@import "../../assets/scss/common";
	.read_tape {
		background-color: #f9ead4;
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: 1;
		.read_nav {
			width: 720px/$ppr;
			height: 96px/$ppr;
			background-color: #56af00;
			margin-bottom: 82px/$ppr;
			.back_btn {
				width: 64px/$ppr;
				height: 64px/$ppr;
				background-image: url(./img/back2.png);
				background-size: 100% 100%;
				position: absolute;
				left: 24px/$ppr;
				top: 16px/$ppr;
			}
			p {
				text-align: center;
				line-height: 96px/$ppr;
				font-size: 36px/$ppr;
				color: #FFFFFF;
			}
		}
		.tips {
			width: 686px/$ppr;
			height: 274px/$ppr;
			background: url(img/tip_bg.png);
			background-size: 100%;
			margin: 86px/$ppr auto 0;
			>div {
				width: 500px/$ppr;
				height: 100%;
				font-size: 30px/$ppr;
				color: #ff6600;
				padding-top: 58px/$ppr;
				padding-left: 40px/$ppr;
				line-height: 1.5;
			}
		}
		.bom_alert {
			width: 720px/$ppr;
			height: 160px/$ppr;
			position: fixed;
			z-index: 5;
			bottom: 0;
			background-color: #f9ead4;
		}
		.running {
			box-sizing: border-box;
			padding-top: 20px/$ppr;
			width: 100%;
			height: 160px/$ppr;
			background-color: #FFFFFF;
			.run_errer {
				width: 75px/$ppr;
				height: 75px/$ppr;
				background-image: url(./img/errer.png);
				background-size: 100% 100%;
				float: left;
				margin-left: 230px/$ppr;
			}
			.run_true {
				width: 75px/$ppr;
				height: 75px/$ppr;
				background-image: url(./img/true.png);
				background-size: 100% 100%;
				float: right;
				margin-right: 230px/$ppr;
			}
			p {
				clear: both;
				font-size: 24px/$ppr;
				text-align: center;
				line-height: 50px/$ppr;
			}
		}
		.ready {
			box-sizing: border-box;
			padding-top: 36px/$ppr;
			width: 100%;
			height: 160px/$ppr;
			background-color: #FFFFFF;
			#ready_icon {
				width: 34px/$ppr;
				height: 58px/$ppr;
				margin: 0 auto;
			}
			.ready_icon3 {
				background-image: url(./img/time_3.png);
				background-size: 100% 100%;
			}
			.ready_icon2 {
				background-image: url(./img/time_2.png);
				background-size: 100% 100%;
			}
			.ready_icon1 {
				background-image: url(./img/time_1.png);
				background-size: 100% 100%;
			}
			p {
				font-size: 24px/$ppr;
				text-align: center;
				line-height: 80px/$ppr;
			}
		}
		.begin {
			box-sizing: border-box;
			padding-top: 26px/$ppr;
			background-color: #FFFFFF;
			width: 720px/$ppr;
			height: 160px/$ppr;
			.tape_icon {
				width: 48px/$ppr;
				height: 78px/$ppr;
				background-image: url(./img/tape.png);
				background-size: 100% 100%;
				margin: 0 auto;
			}
			p {
				font-size: 24px/$ppr;
				text-align: center;
				line-height: 60px/$ppr;
			}
		}
		/*.record {
			width: 100%;
			height: 160px/$ppr;
			background: #fff;
			position: absolute;
			bottom: 0;
			left: 0;
			text-align: center;
			font-size: 24px/$ppr;
			color: #333;
			em {
				width: 48px/$ppr;
				height: 78px/$ppr;
				background: url(img/tape.png);
				background-size: 100%;
				display: inline-block;
				margin: 26px/$ppr 0 14px/$ppr;
			}
		}*/
	}
</style>